import Card from '@/components/Card';
import Description from '@/components/Description';
import { envDeviceControllerGetRealTimeLiquidCoolData } from '@/services/ess/deviceEnv';
import { DATABASE_TYPE_ENUM, fetchDictInfo } from '@/utils';
import { useIntl } from '@umijs/max';
import type { DescriptionsProps } from 'antd/es/descriptions';
import React, { useEffect, useState } from 'react';
import Style from '../../index.less';

interface propsType {
  deviceCode?: string;
}
const Index: React.FC<propsType> = ({ deviceCode }) => {
  const intl = useIntl();
  let Options_type1: any[] = [];
  let Options_type2: any[] = [];
  let Options_type3: any[] = [];
  let Options_online: any[] = [];
  let Options_faultLeve: any[] = [];
  let Options_runState: any[] = [];
  let Options_runMode: any[] = [];
  const [overallState, setoverallState] = useState<DescriptionsProps['items']>([
    {
      key: 'runState',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.runningStatus' }),
      children: '',
    },
    {
      key: 'comprState',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.compressorCoolingStatus' }),
      children: '',
    },
    {
      key: 'heatState',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.electricHeatingStatus' }),
      children: '',
    },
    {
      key: 'selfLoopState',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.selfCirculation' }),
      children: '',
    },
    {
      key: 'pumpSpeed',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.pumpSpeedPercentage' }),
      children: '',
    },
    {
      key: 'outdoorTemp',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.outdoorTemperature' }),
      children: '',
    },
    {
      key: 'inletWaterTemp',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.inletWaterTemperature' }),
      children: '',
    },
    {
      key: 'outletWaterTemp',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.outletWaterTemperature' }),
      children: '',
    },
    {
      key: 'inletWaterPress',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.inletWaterPressure' }),
      children: '',
    },
    {
      key: 'outletWaterPress',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.outletWaterPressure' }),
      children: '',
    },
    {
      key: 'fanOutput',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.fanOutputPercentage' }),
      children: '',
      span: 1,
    },
  ]);
  const [overallSensor, setoverallSensor] = useState<DescriptionsProps['items']>([
    {
      key: 'faultLevel',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.faultLevel' }),
      children: '',
    },
    {
      key: 'stateInfos',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.statusInfo' }),
      children: '',
    },
    {
      key: 'faultInfos',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.faultInfo' }),
      children: '',
    },
    {
      key: 'disabled',
      label: '',
      children: '',
      hidden: true,
    },
  ]);
  const [overallParams, setoverallParams] = useState<DescriptionsProps['items']>([
    {
      key: 'onOff',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.powerSwitch' }),
      children: '',
    },
    {
      key: 'setRunMode',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.operationMode' }),
      children: '',
    },
    {
      key: 'setTemp',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.setTemperature' }),
      children: '',
    },
    {
      key: 'setDiffMode',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.temperatureDifferenceMode' }),
      children: '',
    },
    {
      key: 'coolStartDif',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.coolingStartDifferential' }),
      children: '',
    },
    {
      key: 'coolStopDif',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.coolingStopDifferential' }),
      children: '',
    },
    {
      key: 'coolStopDif',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.heatingStartDifferential' }),
      children: '',
    },
    {
      key: 'heatStopDif',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.heatingStopDifferential' }),
      children: '',
      span: 1,
    },
  ]);
  const [baseInfo, setbaseInfo] = useState<DescriptionsProps['items']>([
    {
      key: 'enableState',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.isEnable' }),
      children: '',
    },
    {
      key: 'onlineState',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.onlineStatus' }),
      children: '',
    },
    // {
    //   key: 'faultLevel',
    //   label: '故障状态',
    //   children: '',
    // },
    {
      key: 'product',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.deviceModel' }),
      children: '',
      span: 1,
    },
  ]);

  const changeFuntion = (key: any, result: any) => {
    const array = ['runState', 'comprState', 'heatState', 'selfLoopState', 'heatState'];
    const array2 = ['enableState'];
    const array3 = ['onOff'];
    const array_onlineState = ['onlineState'];
    const array_faultLeve = ['faultLevel'];
    const array_runMode = ['setRunMode'];
    if (array.includes(key)) {
      if (key === 'runState') {
        return Options_runState.find((res) => res.value === result)?.['label'] || '';
      } else {
        return Options_type1.find((res) => res.value === result)?.['label'] || '';
      }
    } else if (array2.includes(key)) {
      return Options_type2.find((res) => res.value === result)?.['label'] || '';
    } else if (array3.includes(key)) {
      return Options_type3.find((res) => res.value === result)?.['label'] || '';
    } else if (array_onlineState.includes(key)) {
      return Options_online?.find((res) => res.value === result)?.['label'] || '';
    } else if (array_runMode.includes(key)) {
      return Options_runMode?.find((res) => res.value === result)?.['label'] || '';
    } else if (array_faultLeve.includes(key)) {
      return Options_faultLeve?.find((res) => res.value === result)?.['label'] || '';
    } else {
      return result;
    }
  };

  const changeContent = () => {
    envDeviceControllerGetRealTimeLiquidCoolData({
      deviceCode: deviceCode,
    }).then((res) => {
      const desc1 = overallState.map((item) => {
        return {
          ...item,
          children: changeFuntion(item.key, res.data?.[item.key]),
        };
      });
      setoverallState(desc1);

      const desc2 = overallSensor.map((item) => {
        return {
          ...item,
          children: changeFuntion(item.key, res.data?.[item.key]),
        };
      });
      setoverallSensor(desc2);

      const desc3 = overallParams.map((item) => {
        return {
          ...item,
          children: changeFuntion(item.key, res.data?.[item.key]),
        };
      });
      setoverallParams(desc3);

      const desc4 = baseInfo.map((item) => {
        return {
          ...item,
          children: changeFuntion(item.key, res.data?.[item.key]),
        };
      });
      setbaseInfo(desc4);
    });
  };

  useEffect(() => {
    Promise.all([
      fetchDictInfo(DATABASE_TYPE_ENUM.WORKING_STATE_OF_DEHUMIDIFICATION, true),
      fetchDictInfo(DATABASE_TYPE_ENUM.ENABLE_DEVI, true),
      fetchDictInfo(DATABASE_TYPE_ENUM.LIQUID_COOLED_SWITCH, true),
      fetchDictInfo(DATABASE_TYPE_ENUM.ONLINE_STATUS, true),
      fetchDictInfo(DATABASE_TYPE_ENUM.LIQUID_COOLING_OPERATION_STATE, true),
      fetchDictInfo(DATABASE_TYPE_ENUM.LIQUID_COOLING_OPERATION_STATE_MODE, true),
      fetchDictInfo(DATABASE_TYPE_ENUM.LIQUID_COOLED_FAULT_LEVE, true),
    ]).then((res) => {
      Options_type1 = res[0];
      Options_type2 = res[1];
      Options_type3 = res[2];
      Options_online = res[3];
      Options_runState = res[4];
      Options_runMode = res[5];
      Options_faultLeve = res[6];
      changeContent();
    });
  }, []);

  const column = { xxl: 3, xl: 2, lg: 1, md: 1, sm: 1 };

  return (
    <div
      style={{
        display: 'flex',
        flexWrap: 'wrap',
        gap: 0,
        flexDirection: 'column',
      }}
    >
      <Card
        title={intl.formatMessage({ id: 'stationRealtimeMonitoring.liquidStatus' })}
        className={Style.CardStyle}
      >
        <Description items={overallState} column={column} />
      </Card>
      <Card
        title={intl.formatMessage({ id: 'stationRealtimeMonitoring.faultInfo' })}
        className={Style.CardStyle}
      >
        <Description items={overallSensor} column={column} />
      </Card>
      <Card
        title={intl.formatMessage({ id: 'stationRealtimeMonitoring.operationParams' })}
        className={Style.CardStyle}
      >
        <Description items={overallParams} column={column} />
      </Card>
      <Card
        title={intl.formatMessage({ id: 'stationRealtimeMonitoring.info' })}
        className={Style.CardStyle}
      >
        <Description items={baseInfo} column={column} />
      </Card>
    </div>
  );
};

export default Index;
